<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 300px;
            height: 500px;
            border: 1px solid #fcc;
            padding: 20px;
            /* 可以加padding研究一下滚动条出现的位置，挺有意思 */
            overflow: scroll;

            background-image: url("./girl.jpg");
            background-repeat: no-repeat;
            background-size: 200px 300px;
            background-position: 50% 50%;
            /* 50% 为居中 */

            background-attachment: fixed;
        }

    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur ipsa accusamus suscipit! Quam commodi ex vero eligendi eos? Pariatur eius nostrum veritatis sapiente excepturi dolor eos iusto ipsam neque blanditiis! Ab, in. Debitis deserunt sit, excepturi ducimus, eos ipsum, officia inventore reprehenderit iusto itaque voluptatibus! Voluptas perspiciatis odio delectus sed sapiente optio, recusandae et autem fugiat illum ratione animi, labore iste in accusamus. Iusto molestias in error eaque laudantium repellat, incidunt eos impedit facere vel, aliquid libero modi qui mollitia beatae esse reprehenderit, asperiores quisquam nihil similique? Voluptas aut quas, explicabo mollitia ducimus perspiciatis, reiciendis, repudiandae sequi illo ad doloribus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum doloribus fuga, at nulla, nihil vel sit, iste rem placeat eaque sint exercitationem ad in expedita quaerat perspiciatis iure tenetur reiciendis dicta tempora. Minima odit iure eum placeat nesciunt provident explicabo obcaecati, omnis, doloremque nostrum id, quasi architecto nam. Voluptate tenetur, sapiente eveniet fugiat alias ea illo consectetur doloribus dignissimos ducimus quaerat quidem ipsa, dolorem pariatur suscipit natus repudiandae! Illum, ullam? Veniam necessitatibus voluptas neque ex quidem nisi animi perferendis error voluptate possimus sint nobis praesentium molestias, nam quo, unde minima. Sequi ipsa non architecto voluptatibus? Dicta adipisci officiis voluptatibus neque.
    </div>
</body>
</html>